import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { Menu } from "antd";
const SubMenu       = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

export default class Navigator extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state  = {
      isOpen: false
    };
  }
  state = {
    current: "home"
  };
  handleClick = e => {
    this.setState({
      current: e.key
    });
  };
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
      <Menu
        onClick      = {this.handleClick}
        selectedKeys = {[this.state.current]}
        mode         = "horizontal"
      >
        <Menu.Item key="home">
          <NavLink to="/" id="nav">首页</NavLink>
        </Menu.Item>
        <Menu.Item key="counter">
          <NavLink to="/counter">counter</NavLink>
        </Menu.Item>
        <Menu.Item key="login">
          <NavLink to="/login">login</NavLink>
        </Menu.Item>
        <Menu.Item key="product">
          <NavLink to="/product">产品中心</NavLink>
        </Menu.Item>

        <Menu.Item key="cart">
          <NavLink to="/cart">购物车</NavLink>
        </Menu.Item>
      </Menu>
    );
  }
}
